<script setup lang="ts">
import { ref } from "vue"
enum SizeEnum {
    S = "s",
    M = "m",
    L = "l",
    XL = "xl",
    XXL = "xxl",
    XXXL = "xxxl"
}


const showAvatar = ref(true)

// 定义一个变量 尺寸的变量
const sizeData = ref<SizeEnum>(SizeEnum.S) // 尺寸的数据

const changeSize = () => {
   if(sizeData.value === SizeEnum.S) {
    sizeData.value = SizeEnum.M
   }
  else if(sizeData.value === SizeEnum.M) {
    sizeData.value = SizeEnum.L
   }
   else if(sizeData.value === SizeEnum.L) {
    sizeData.value = SizeEnum.XL
   }
   else if(sizeData.value === SizeEnum.XL) {
    sizeData.value = SizeEnum.XXL
   } 
   else if(sizeData.value === SizeEnum.XXL) {
    sizeData.value = SizeEnum.XXXL
   }
   else  {
    sizeData.value = SizeEnum.S
   }
}
</script>

<template>
  <div class="container">
    <h1>测试条件渲染-v-show</h1>
    <!-- <img
      v-show="showAvatar"
      class="avatar"
      src="https://img2.baidu.com/it/u=6183387,1958309347&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
      alt=""
    /> -->
    <img
      v-if="showAvatar"
      class="avatar"
      src="https://img2.baidu.com/it/u=6183387,1958309347&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
      alt=""
    />
    <button @click="showAvatar = !showAvatar">显示/隐藏</button>
    <p>
        <h1>v-if和v-else-if和v-else</h1>
    </p>
    <p>
        <h2 v-if="sizeData === SizeEnum.S">小孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.M">大孩的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.L">青年的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XL">正常的尺码</h2>
        <h2 v-else-if="sizeData === SizeEnum.XXL">微胖的尺码</h2>
        <h2 v-else>老高的尺码</h2>
    </p>
    <p>
        <button @click="changeSize">改变尺寸</button>
    </p>
   
  


  </div>
</template>

<style scoped>
.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.container {
    width: 100%;
    margin: 20px auto;
    text-align: center;
}
/* display: block inline-block inline 行内元素 flex */
</style>
